<!DOCTYPE html>
<html>
<head>
	<title>Don't Starve Food Guide</title>
	<link rel="shortcut icon" href="icon.png" />
	<meta charset='utf-8' />
	<style type="text/css">
		body { background: #ccc; width: 1000px; margin-left: auto; margin-right: auto; overflow: scroll; font-family: sans-serif; }
		a { color: #333; }
		a:hover { color: #888; }
		#navbar { position: relative; left: 0px; top: 0px; display: block; z-index: 1; }
		#navbar li { display: inline-block; list-style-type: none; padding-left: 0px; margin-left: 0px; border: 1px solid black; background: #ddd; cursor: pointer; margin-bottom: 8px; vertical-align: top; padding: 4px; }
		#navbar li.selected { font-weight: bold; background: #fff; padding-top: 8px; margin-bottom: 0px; border-radius: 0px 0px 6px 6px; border-bottom: 2px solid black; }
		#navbar a { color: inherit; text-decoration: none; }
		#main { background: #eee; position: relative; top: -40px; padding: 10px; padding-top: 40px; border: 1px solid #999; }
		.ingredientlist {  }
		span.ingredient { width: 68px; height: 68px; display: inline-block; margin: 0px; margin-right: 5px; overflow: hidden; cursor: pointer; background: url('img/background.png') top left no-repeat; position: relative; }
		span.ingredient img { display: block; position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin-left: -32px; margin-top: -32px; border: none; }
		.searchselector { display: inline-block; padding: 0px 0px 0px 2px; line-height: 22px; vertical-align: bottom; border: 1px solid #999; border-right: none; height: 100%; background: #ccc; background: linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -webkit-linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -moz-linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(170,170,170,1)), color-stop(50%,rgba(170,170,170,0))); border-radius: 3px 0px 0px 3px; transition: border-bottom-left-radius 100ms ease; cursor: pointer; }
		.searchselector.retracted:after { content: ''; margin-left: 3px; margin-right: 2px; width: 0; height: 0; display: inline-block; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #444; margin-bottom: 2px; }
		.searchselector.extended:after { content: ''; margin-left: 3px; margin-right: 2px; width: 0; height: 0; display: inline-block; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #444; margin-bottom: 2px; }
		.searchselector:active { background-color: #777; }
		.searchdropdown { z-index: 2; position: absolute; height: 0px; overflow: hidden; border-radius: 0px 0px 3px 3px; transition: height 200ms ease, border-top-left-radius 100ms ease; border-top-left-radius: 3px; }
		.searchdropdown div { background: #ccc; border: 1px solid #888; border-top: none; cursor: pointer; padding: 0px 2px 0px 2px; }
		.ingredientpicker { border: 1px solid #888; padding: 3px; height: 12pt; border-radius: 0px 4px 4px 0px; }
		.ingredientpicker:hover { border: 1px solid #aaa; }
		.ingredientdropdown { display: block; z-index: 1; }
		.ingredientdropdown div { margin: 0px; padding: 0px; margin-bottom: 4px; text-align: justify; }
		.ingredientdropdown div span { border: 1px solid #bbb; font-size: 8pt; padding-top: 2px; white-space: nowrap; text-align: center; line-height: 14px; display: inline-block; vertical-align: top; padding-left: 1px; overflow: hidden; padding-right: 1px; margin: 1px; list-style-type: none; cursor: pointer; border-radius: 4px; background: #ddd; background: linear-gradient(to bottom, #dddddd 0%,#cccccc 2px,#cccccc 60%,#bbbbbb 85%,#888888 100%); background: -moz-linear-gradient(to bottom, #eeeeee 0%,#dddddd 8%,#dddddd 60%,#cccccc 85%); background: -webkit-linear-gradient(to bottom, #eeeeee 0%,#dddddd 8%,#dddddd 60%,#cccccc 85%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee),color-stop(8%, #dddddd),color-stop(60%, #dddddd),color-stop(85%, #cccccc)); }
		.ingredientdropdown span img { margin-left: auto; margin-right: auto; width: 20px; height: 20px; display: block; }
		.ingredientdropdown span:hover { background: #eee; background: linear-gradient(to bottom, #ffffff 0%,#d8d8d8 2px,#d8d8d8 60%,#c8c8c8 85%,#aaaaaa 100%); background: -moz-linear-gradient(to bottom, #ffffff 0%,#d8d8d8 2px,#d8d8d8 60%,#c8c8c8 85%,#aaaaaa 100%); background: -webkit-linear-gradient(to bottom, #ffffff 0%,#d8d8d8 2px,#d8d8d8 60%,#c8c8c8 85%,#aaaaaa 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff),color-stop(2px, #d8d8d8),color-stop(60%, #d8d8d8),color-stop(85%, #c8c8c8),color-stop(100%, #aaaaaa)); }
		.ingredientdropdown span:active { background: #fff; background: linear-gradient(to bottom, #ffffff 0%,#d5d5d5 2px,#ffffff 60%,#dddddd 85%,#aaaaaa 100%); background: -moz-linear-gradient(to bottom, #ffffff 0%,#d5d5d5 2px,#ffffff 60%,#dddddd 85%,#aaaaaa 100%); background: -webkit-linear-gradient(to bottom, #ffffff 0%,#d5d5d5 2px,#ffffff 60%,#dddddd 85%,#aaaaaa 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff),color-stop(2px, #d5d5d5),color-stop(60%, #ffffff),color-stop(85%, #dddddd),color-stop(100%, #aaaaaa)); }
		.ingredientdropdown span.selected { background: #fff; background: linear-gradient(to bottom, #ffffff 0%,#d5d5d5 2px,#ffffff 60%,#dddddd 85%,#aaaaaa 100%); background: -moz-linear-gradient(to bottom, #ffffff 0%,#d5d5d5 2px,#ffffff 60%,#dddddd 85%,#aaaaaa 100%); background: -webkit-linear-gradient(to bottom, #ffffff 0%,#d5d5d5 2px,#ffffff 60%,#dddddd 85%,#aaaaaa 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff),color-stop(2px, #d5d5d5),color-stop(60%, #ffffff),color-stop(85%, #dddddd),color-stop(100%, #aaaaaa)); }
		.ingredientdropdown span.faded { opacity: 0.5; }
		.clearingredients { color: red; display: inline-block; padding-left: 5px; padding-right: 5px; cursor: pointer; border: 1px solid #c55; margin-left: 12pt; text-align: center; vertical-align: center; font-size: 75%; opacity: 0.4; }
		.clearingredients:hover { opacity: 1; }
		h2 { padding-left: 10px; color: #444; margin-bottom: 4pt; }
		p { margin-top: 0pt; }
		table { width: 100%; }
		table td { border-left: 1px solid white; border-top: 1px solid white; border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; background: #ddd; padding-left: 3px; padding-right: 3px; }
		td img { width: 32px; height: 32px; }
		table tr { border: 1px solid black; }
		table tr.highlighted td { background: #ffb; border-bottom: 1px solid #cc3; border-right: 1px solid #cc3; }
		table th { border-bottom: 2px solid black; }
		table.links span.link { padding-left: 2px; padding-right: 2px; padding-bottom: 1px; padding-top: 1px; display: inline-block; border: 1px solid #999; background: #ccc; background: linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -webkit-linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -moz-linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(170,170,170,1)), color-stop(50%,rgba(170,170,170,0))); border-radius: 3px; cursor: pointer; }
		table.links span.link:hover { opacity: 0.8; }
		table.links span.link.left { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: none; }
		table.links span.link.right { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
		table span.link.strike { text-decoration: line-through; color: #755; }
		table.links span.link.strike { border: 1px solid #bbb; }
		span.link img { width: 20px; height: 20px; vertical-align: text-bottom; }
		#footer { padding-left: 10px; padding-right: 10px; color: #777; text-align: center; }
		#footer a { color: #585858; }
		#footer a:hover { color: #777; }
		button.makablebutton { font-size: 14pt; margin: 4px; padding-left: 2px; padding-right: 2px; padding-bottom: 1px; padding-top: 1px; display: inline-block; border: 1px solid #999; background: #ccc; background: linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -webkit-linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -moz-linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(170,170,170,1)), color-stop(50%,rgba(170,170,170,0))); border-radius: 3px; cursor: pointer; }
		div.recipeFilter img { opacity: 0.6; margin: 4px; padding-left: 2px; padding-right: 2px; padding-bottom: 1px; padding-top: 1px; display: inline-block; border: 1px solid #999; background: #ccc; background: linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -webkit-linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -moz-linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(170,170,170,1)), color-stop(50%,rgba(170,170,170,0))); border-radius: 3px; cursor: pointer; }
		div.recipeFilter img:hover { opacity: 0.8; }
		div.recipeFilter img.selected { opacity: 1; border-width: 3px; margin: 2px; }
		div.foodFilter img { width: 32px; height: 32px; opacity: 0.4; margin: 4px; padding-left: 2px; padding-right: 2px; padding-bottom: 1px; padding-top: 1px; display: inline-block; border: 1px solid #999; background: #ccc; background: linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -webkit-linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -moz-linear-gradient(to top, rgba(170, 170, 170, 1) 0%,rgba(170, 170, 170, 0) 50%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(170,170,170,1)), color-stop(50%,rgba(170,170,170,0))); border-radius: 3px; cursor: pointer; }
		div.foodFilter img:hover { opacity: 0.8; }
		div.foodFilter img.selected { border-width: 3px; margin: 2px; opacity: 1; }
		div.foodFilter img.excluded { border-width: 3px; border-color: #711; margin: 2px; opacity: 0.8; background: #fcc; }
		strong { color: #333; }
	</style>
</head>
<body>
	<ul id="navbar">
		<li data-tab="simulator">Simulator</li>
		<li data-tab="discovery">Discovery</li>
		<li data-tab="foodlist">Food List</li>
		<li data-tab="crockpot">Recipe List</li>
		<li data-tab="statistics">Statistics Analyzer</li>
		<li data-tab="help">Help</li>
		<li><a href="http://www.dontstarvegame.com/" target="_blank">Don't Starve</a></li>
	</ul>
	<div id="main">
		<div id="simulator">
			<div style="margin-bottom: 6pt">Add ingredients to see what they make.</div>
			<input type="text" class="ingredientpicker" data-type="food" data-cookable="true" style="width: 25%" placeholder="Filter ingredients" /><div id="ingredients" class="ingredientlist"><span class="ingredient"></span><span class="ingredient"></span><span class="ingredient"></span><span class="ingredient"></span></div>
			<div id="results"></div>
		</div>
		<div id="discovery">
			<div style="margin-bottom: 6pt">Add items in your inventory to see your options.</div>
			<input type="text" class="ingredientpicker" style="width: 25%" placeholder="Filter ingredients" /><div id="inventory" class="ingredientlist"></div>
			Stats about your food:
			<div id="discoverfood"></div>
			With these, you can make:
			<div id="discover"></div>
			Find what recipes are most efficient:
			<div id="makable"></div>
		</div>
		<div id="foodlist">
			<div id="food"></div>
		</div>
		<div id="crockpot">
			<div id="recipes"></div>
		</div>
		<div id="statistics">
		</div>
		<div id="help">
			<h2>About This Food Guide</h2>
			<p>
				This is an unofficial tool to help avoid starvation in <a href="http://www.dontstarvegame.com/">Don't Starve</a>,
				an uncompromising wilderness survival game full of science and magic,
				by <a href="http://kleientertainment.com/">Klei Entertainment</a>,
				available on the <a href="https://chrome.google.com/webstore/detail/dont-starve/hiledapehlkhdehbhppgmekfalnlfajc">Chrome Web Store</a>
				and <a href="http://store.steampowered.com/app/219740/">Steam</a>.
			</p>
			<p>This tool requires a modern web browser and is officially supported in recent versions of: Chrome/Chromium (and mobile), Firefox, Safari (and mobile), and Internet Explorer 9+</p>
			<p>The food and recipe database should be current as of the <strong>Where there's a Wilson... update, April 30th 2014</strong>.</p>
			<h2>About Don't Starve Food</h2>
			<p>
				<strong>Perish time</strong> is the time before a food item becomes <strong>Rot</strong>. <strong>Halfway</strong> through this period, it will go <strong>stale</strong>, and give <strong><span id="stalehealth"></span> health</strong> and <strong><span id="stalehunger"></span> hunger</strong>.
				Food <strong>spoils</strong> at <strong>three quarters</strong>, giving only <strong><span id="spoiledhunger"></span> hunger</strong> and <strong>no longer giving any health</strong>.
				Eating spoiled food will decrease sanity by <strong><span id="spoiledsanity"></span></strong>.
				Food <strong>dropped on the ground</strong> will <strong>perish</strong> at a rate of <strong><span id="perishground"></span></strong> (or <strong><span id="perishwinter"></span></strong> in <strong>Winter</strong>, <strong><span id="perishsummer"></span></strong> in <strong>Summer</strong>), while keeping it in the <strong>Ice Box</strong> will reduce the rate to <strong><span id="perishfridge"></span></strong>.
			</p>
			<p><strong>Recipe priority</strong> determines which recipe a food combination will make; only the highest-priority possible recipes can be produced by a batch of ingredients.</p>
			<p>In recipe requirements, cooked/uncooked usually doesn't make a difference. If it does, then only the valid form will be listed.</p>
			<h2>Simulator</h2>
			<p>
				The Simulator works like a Crock Pot: add items, and it will tell you what food will be prepared. Note that only the highest-priority recipes will be candidates when actually cooking in-game.
				The combined totals at the top reflect the ingredients added, where perish time is the shortest.
				The suggestions below the real results show what recipes could be made by adding different items to those already in the Crock Pot.
			</p>
			<h2>Discovery</h2>
			<p>
				The Discovery tab is finds what recipes can be prepared using a collection of ingredients. It doesn't take item quantity into account, instead assuming you have four of each.
				You are also able to calculate efficient recipes using your ingredients to get the most health or hunger benefit from cooking them in the crock pot. This works identically to the Statistics Analyzer tab, but limited to your inventory.
			</p>
			<h2>Statistics Analyzer</h2>
			<p>
				The Statistics Analyzer tab is for those who just want to explore ingredient combinations. It will calculate every valid ingredient combination possible (using an "ideal" ingredient selection, generally excluding uncooked food) and allows filtration by recipe and ingredient contents. Computation may take some time on slower computers.
			</p>
			<h2>Links</h2>
			<p><a href="https://code.google.com/p/dont-starve-food/source/list" target="_blank">Food Guide Change Log</a>
			<p><a href="https://code.google.com/p/dont-starve-food/issues/list" target="_blank">Report Food Guide Bugs or Issues</a>
			<p><a href="http://www.dontstarvegame.com/" target="_blank">Don't Starve Official Website</a>
			<p><a href="http://dont-starve-game.wikia.com/" target="_blank">Don't Starve on Wikia</a>
			<p><a href="http://dontstarvewiki.net/" target="_blank">Don't Starve Wiki (mostly abandoned)</a>
		</div>
	</div>
	<div id="footer">
		<a href="http://www.dontstarvegame.com/">Don't Starve</a> &copy; <a href="http://kleientertainment.com/">Klei Entertainment</a>. Unofficial food guide <a href="foodguide_source.js">source code</a> made available under the <a href="http://opensource.org/licenses/MIT">MIT License</a>.
	</div>
	<script type="text/javascript" src="foodguide.js"></script>
</body>
</html>